<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class="search-bigbox">
			<view class="search-box acea-row row-middle" hover-class="none">
				<text class="iconfont icon-sousuo1"></text>
				<input type="text" v-model="search_value" confirm-type="search" @input="search" @confirm="search"
					placeholder="请输入搜索关键词">
			</view>
		</view>
		<view class="tab-box">
			<view class="acea-row row-around">
				<block v-for="(item,index) in tabList" :key="index">
					<view class="tab-item" :class="tabIndex == index? 'active':''" @click="tab(index)">
						<text class="tit"> {{item}} </text> <text class="iconfont icon-xiala1"></text>
					</view>
				</block>
				<scroll-view scroll-y="true" class="select-list" v-if="show1">
					<block v-for="(item,index) in select_list1" :key="index">
						<view class="select-item acea-row row-between-wrapper"
							:class="selectIndex1 == index? 'active':''" @tap.stop="select1(item,index)">
							<text class="tit"> {{item.name}} </text>
							<u-icon name="checkbox-mark" color="#347dfe" size="20" v-if="selectIndex1 == index">
							</u-icon>
						</view>

					</block>
				</scroll-view>
				<scroll-view scroll-y="true" class="select-list" v-if="show2">
					<block v-for="(item,index) in select_list2" :key="index">
						<view class="select-item acea-row row-between-wrapper"
							:class="selectIndex2 == index? 'active':''" @tap.stop="select2(item,index)">
							<text class="tit"> {{item.type_name}} </text>
							<u-icon name="checkbox-mark" color="#347dfe" size="20" v-if="selectIndex2 == index">
							</u-icon>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<view class="list-box">
			<block v-for="(item,index) in hospital_list" :key="index">
				<view @click="topage(item)" class="list-item acea-row">
					<image :src="imageUrl+item.head_image" mode="widthFix"></image>
					<view class="cont-box">
						<view class="title"> {{item.name}} </view>
						<view class="grade acea-row row-center-wrapper">
							<image src="/static/images/hospital-grade.png" mode="widthFix"></image> {{item.type_name}}
						</view>
						<view class="address"> {{item.address}} </view>
					</view>
				</view>
			</block>			
			<u-loadmore :status="status" line dashed @loadmore="loadmore" v-if="hospital_list.length > 0"/>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无医院" v-else></u-empty>
		</view>
		<u-overlay :show="show1" @click="show1 = false" zIndex="9"></u-overlay>
		<u-overlay :show="show2" @click="show2 = false" zIndex="9"></u-overlay>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				typepage:'',//1是问询 2保险
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '选择医院',
					'color': false,
				},
				imageUrl: this.imageUrl,
				cityName: app.globalData.city,
				tabList: ['全部地区', '全部医院'],
				tabIndex: '',
				// 地区
				select_list1: [],
				selectIndex1: 0,
				show1: false,
				// 医院
				select_list2: [],
				selectIndex2: 0,
				show2: false,
				// 列表传值
				hospital_list: [],
				type_id: "",
				area_id: app.globalData.area_id,
				search_value: '',
				// 加载更多
				status: 'loadmore',
				limit: 10,
				page: 1,
				total_num: '',
			};
		},
		onLoad(option) {
			if(option.type){
				this.typepage = option.type;
			}
			this.hospitalList(1);
			this.typeLists();
			// this.areaToId();
			this.areaLists(this.area_id)
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
		
		},
		onShareTimeline(res) { //分享到朋友圈
		
		},
		onReachBottom() {
			this.loadmore()
		},
		methods: {
			// async areaToId() {
			// 	const res = await this.$myRequest({
			// 		url: '/api/index/areaToId',
			// 		data: {
			// 			area: this.cityName
			// 		}
			// 	})
			// 	this.area_id = res.data.data
			// 	this.areaLists(this.area_id)
			// 	this.hospital_list = [];
			// 	this.hospitalList(1)
			// },
			async areaLists(id) {
				const res = await this.$myRequest({
					url: '/api/index/getArea',
					data: {
						city: id
					}
				})
				var arr1 = [{
					id:app.globalData.area_id,
					name: '全部地区'
				}];
				var arr2 = res.data.data;
				arr1.push(...arr2);
				this.select_list1 = arr1;
			},
			async typeLists() {
				const res = await this.$myRequest({
					url: '/api/hospital/typeLists',
				})
				var arr1 = [{
					id:'',
					type_name: '全部医院'
				}];
				var arr2 = res.data.data;
				arr1.push(...arr2);
				this.select_list2 = arr1;
			},
			async hospitalList(page) {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/hospital/lists',
					data: {
						page: page,
						limit: this.limit,
						area: that.area_id,
						type_id: that.type_id,
						search: that.search_value,
					}
				})
				this.hospital_list = [...this.hospital_list, ...res.data.data];
				this.total_num = res.data.total_num;
			},
			tab(index) {
				this.tabIndex = index;
				if (index == 0) {
					this.show1 = !this.show1;
					this.show2 = false;
				} else {
					this.show2 = !this.show2;
					this.show1 = false;
				}

			},
			select1(item, index) {
				console.log(item)
				this.selectIndex1 = index;
				this.area_id = item.id;
				this.show1 = false;
				//  --------
				var tabList = this.tabList;
				tabList[0] = item.name;
				this.tabList = tabList;
				//  --------
				this.hospital_list = [];
				this.hospitalList(1);
			},
			select2(item, index) {
				console.log(item)
				this.selectIndex2 = index;
				this.type_id = item.id;
				this.show2 = false;
				//  --------
				var tabList = this.tabList;
				tabList[1] = item.type_name;
				this.tabList = tabList;
				//  --------
				this.hospital_list = [];
				this.hospitalList(1);
			},
			search() {
				this.hospital_list = [];
				this.page = 1;
				this.hospitalList(1);
			},
			topage(item) {
				uni.setStorageSync('hospital_id', item.id)
				uni.setStorageSync('hospital_name', item.name)
				if(this.typepage == 1){//问询服务
					uni.navigateTo({
						url: "/bundle/pages/about/about"
					})
				}else if(this.typepage == 2){//保险服务
					uni.navigateTo({
						url: "/bundle/pages/insure/insure"
					})
				}else{//陪诊代办 陪护 排行榜
					uni.navigateTo({
						url: "/pages/index/ranking_list"
					})
				}
			},
			loadmore() {
				console.log(11111)
				if (this.total_num == this.hospital_list.length) {
					this.status = 'nomore';
				} else {
					this.status = 'loading';
					this.page = ++this.page;
					this.hospitalList(this.page);
				}
				setTimeout(() => {
					if (this.total_num == this.hospital_list.length) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.search-bigbox {
		position: relative;
		z-index: 10;
		padding: 30rpx;
		padding-bottom: 0;
		background-color: #fff;
	}

	.search-box {
		width: 100%;
		height: 70rpx;
		border-radius: 14rpx;
		border: 1px solid #DEDEDE;
		color: rgba(153, 153, 153, 0.502);
		padding: 0 30rpx;
		font-size: 24rpx;
	}

	.search-box .iconfont {
		font-size: 42rpx;
		margin-right: 30rpx;
	}

	.tab-box {
		padding: 30rpx 0;
		position: relative;
		z-index: 10;
		background-color: #fff;
	}

	.tab-box .tab-item {
		width: 33.3%;
		text-align: center;
	}

	.tab-box .tab-item.active {
		color: #347dfe;
	}

	.tab-box .tab-item.active .tit {
		font-size: 30rpx;
	}

	.select-list {
		position: absolute;
		width: 100%;
		left: 0;
		top: 96rpx;
		background-color: #fff;
		padding: 0 30rpx;
		height: 460rpx;

	}

	.select-list .select-item {
		height: 90rpx;
		border-bottom: 1px solid #F4F4F4;

	}

	.select-list .select-item.active {
		color: #347dfe;
	}

	.list-box {
		padding: 0 30rpx;
		padding-bottom: 60rpx;
		position: relative;
		z-index: 8;
	}

	.list-item {
		padding: 30rpx 0;
		border-bottom: 1px solid #DDDDDD;
	}

	.list-item image {
		width: 95rpx;
		height: 95rpx;
		border-radius: 50%;
	}

	.list-item .cont-box {
		flex: 1;
		padding-left: 40rpx;
		font-size: 26rpx;
	}

	.list-item .cont-box .title {
		font-size: 32rpx;
		color: #000;
	}

	.list-item .cont-box .grade {
		background-color: #FE8802;
		font-size: 20rpx;
		color: #fff;
		width: 90rpx;
		height: 36rpx;
		border-radius: 3px;
		margin: 10rpx 0;
	}

	.list-item .cont-box .grade image {
		width: 20rpx;
		margin-right: 6rpx;
	}

	.list-item .cont-box .address {
		color: #A5A5A5;
		font-size: 28rpx;
	}
</style>
